/**
 * 煤棚样式文件
 * author aty
 */
@import 'mixin.scss';
@import 'table.scss';

.page-coal-shed {
	
	@include card-title;
	.left-section {
		width: 23%;
		height: 100%;
		overflow: hidden;
		.card {
			width: 100%;
			height: calc(35% - 10px);
			background: url('../img/bg-mini-card.png') left top no-repeat;
			background-size: 100% 100%;
		}
	}
	.content-section {
		display: flex;
		.ec-2 {
			width: 100%;
			height: 65%;
			margin-top: 10px;
			background: url('../img/left-bottom-card.png') left top no-repeat;
			background-size: 100% 100%;
			.ec-box{
				width: 100%;
				height: 90%;
			}
		}
		.center-section {
			width: 55%;
			height: 100%;
			margin-left: 10px;
			padding: 10px;
			background: url('../img/center-section.png') left top no-repeat;
			background-size: 100% 100%;
			.tools {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-top: -30px;
				.day {
					width: 220px;
					height: 34px;
					font-size: 14px;
					font-weight: 400;
					border: none;
					padding-left: 10px;
					cursor: pointer;
					color: #fff;
					background: url(../img/inp.png) #42566e right center no-repeat;
					background-size: 46px 34px;
					cursor: pointer;
					line-height: 34px;
					input {
						border: none;
						background: #42566e;
						color: #28b4ff;
					}
					}
					.shops-box {
						display: flex;
						padding-left: 20px;
						.btn {
							width: 80px;
							height: 34px;
							border-radius: 3px;
							border: 1px solid #28B4FF;
							line-height: 34px;
							display: flex;
							justify-content: center;
							align-items: center;
							padding-right: 10px;
							margin-left: 10px;
							cursor: pointer;
							.shops-img {
								width: 14px;
								height: 14px;
								display: flex;
								justify-content: center;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.shops-span {
								font-size: 14px;
								font-weight: 400;
								color: #28b4ff;
								margin-left: 8px;
							}
						}
					}
			}
			.table-center{
				width: 100%;
				height: calc(100% - 50px);
				margin-top: 10px;
			}
		}
		.right-section {
			width: calc(22% - 30px);
			margin-left: 10px;
			height: 100%;
			.card {
				width: 100%;
				height: calc(70% - 10px);
				background: url('../img/out-and-in.png') left top no-repeat;
				background-size: 100% 100%;
				.card-table{
					width: 90%;
					height: 80%;
					text-align: center;
					background: url(../img/move.png)center no-repeat;
					background-size: 100% 100%;
					margin: 0 auto;
					margin-top: 10px;
					.card-li{
						display: flex;
						justify-content: space-between;
						padding-top: 25px;
						
						.card-span{
							font-size: 14px;
							font-weight: 400;
							color: #28B4FF;
							margin-top: 10px;
							margin-left: 10px;
						}
						.card-span2{
							font-size: 14px;
							font-weight: 400;
							color: #FFFFFF;
							margin-top: 10px;
							margin-right: 10px;
						}
					}
				}
			}
			.mist{
				height: 30%;
			
				.device-state{
					display: flex;
					justify-content: space-between;
					padding:0 10px;
			
					.state{
						min-width: 66px;
						padding-left: 20px;
						position:relative;
						transform: translateY(10px);
						cursor: pointer;
						&:after{
							content: "";
							position: absolute;
							width: 10px;
							height: 10px;
							background: gray;
							border-radius:50% ;
							margin-right: 5px;
							left: 6px;
							top: 5px;
						}
					}
					.state.inline{
						&::after{
							background: #4EE000;
						}
					}
				}
			}
		}
	}
}
